.member-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;

  /* 背景装饰 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    animation: backgroundMove 20s ease-in-out infinite;
  }

  /* 会员状态卡片 */
  .member-status {
    position: relative;
    z-index: 1;
    padding: 60rpx 30rpx 40rpx;
    
    .status-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20rpx);
      border-radius: 32rpx;
      padding: 50rpx 40rpx;
      box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.3);
      text-align: center;
      position: relative;
      overflow: hidden;
      
      /* 装饰性背景 */
      &::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.1) 50%, transparent 70%);
        animation: shine 3s ease-in-out infinite;
      }
      
      .member-icon {
        font-size: 100rpx;
        margin-bottom: 30rpx;
        animation: float 3s ease-in-out infinite;
        filter: drop-shadow(0 8rpx 16rpx rgba(0, 0, 0, 0.1));
      }
      
      .member-title {
        font-size: 40rpx;
        font-weight: bold;
        margin-bottom: 16rpx;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      
      .member-subtitle {
        font-size: 28rpx;
        color: #646566;
        margin-bottom: 30rpx;
        line-height: 1.5;
      }
      
      .member-badge {
        display: inline-flex;
        align-items: center;
        gap: 12rpx;
        padding: 16rpx 32rpx;
        border-radius: 32rpx;
        font-size: 28rpx;
        font-weight: 600;
        position: relative;
        z-index: 1;
        
        &.active {
          background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
          color: white;
          box-shadow: 0 8rpx 24rpx rgba(255, 216, 155, 0.4);
          
          .badge-icon {
            animation: rotate 2s linear infinite;
          }
        }
        
        &.inactive {
          background: #f2f3f5;
          color: #646566;
          border: 2rpx dashed #c8c9cc;
        }
        
        .badge-icon {
          font-size: 24rpx;
        }
      }
      
      .expire-info {
        margin-top: 20rpx;
        font-size: 24rpx;
        color: #969799;
        
        &.active {
          color: #07c160;
          font-weight: 500;
        }
      }
    }
  }

  /* 会员权益 */
  .member-benefits {
    position: relative;
    z-index: 1;
    padding: 0 30rpx 40rpx;
    
    .benefits-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20rpx);
      border-radius: 24rpx;
      padding: 40rpx;
      box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.3);
      
      .benefits-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #323233;
        margin-bottom: 30rpx;
        text-align: center;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -12rpx;
          left: 50%;
          transform: translateX(-50%);
          width: 60rpx;
          height: 4rpx;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 2rpx;
        }
      }
      
      .benefits-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24rpx;
        
        .benefit-item {
          background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
          border-radius: 20rpx;
          padding: 30rpx 20rpx;
          text-align: center;
          transition: all 0.3s ease;
          border: 2rpx solid transparent;
          
          &:hover {
            transform: translateY(-8rpx);
            box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.1);
            border-color: rgba(102, 126, 234, 0.2);
          }
          
          .benefit-icon {
            font-size: 60rpx;
            margin-bottom: 16rpx;
            display: block;
            animation: bounce 2s ease-in-out infinite;
            animation-delay: calc(var(--index) * 0.2s);
          }
          
          .benefit-text {
            font-size: 28rpx;
            font-weight: 600;
            color: #323233;
            margin-bottom: 8rpx;
          }
          
          .benefit-desc {
            font-size: 24rpx;
            color: #646566;
            line-height: 1.4;
          }
        }
      }
    }
  }

  /* 会员套餐 */
  .member-plans {
    position: relative;
    z-index: 1;
    padding: 0 30rpx 60rpx;
    
    .plans-title {
      font-size: 36rpx;
      font-weight: bold;
      color: white;
      text-align: center;
      margin-bottom: 40rpx;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      
      &::before {
        content: '💎';
        margin-right: 16rpx;
      }
    }
    
    .plans-grid {
      display: flex;
      flex-direction: column;
      gap: 24rpx;
      
      .plan-card {
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(20rpx);
        border-radius: 24rpx;
        padding: 40rpx;
        box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        
        &:active {
          transform: translateY(-8rpx);
          box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
        }
        
        &.recommended {
          border: 3rpx solid #ffd700;
          
          &::before {
            content: '推荐';
            position: absolute;
            top: 20rpx;
            right: -20rpx;
            background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
            color: #333;
            padding: 8rpx 40rpx;
            font-size: 24rpx;
            font-weight: bold;
            transform: rotate(45deg);
            box-shadow: 0 4rpx 12rpx rgba(255, 215, 0, 0.3);
          }
        }
        
        .plan-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 30rpx;
          
          .plan-info {
            .plan-name {
              font-size: 36rpx;
              font-weight: bold;
              color: #323233;
              margin-bottom: 8rpx;
            }
            
            .plan-desc {
              font-size: 26rpx;
              color: #646566;
            }
          }
          
          .plan-price {
            text-align: right;
            
            .price-current {
              font-size: 48rpx;
              font-weight: bold;
              color: #ee0a24;
              
              .price-unit {
                font-size: 28rpx;
                color: #646566;
              }
            }
            
            .price-original {
              font-size: 24rpx;
              color: #c8c9cc;
              text-decoration: line-through;
              margin-top: 4rpx;
            }
          }
        }
        
        .plan-features {
          margin-bottom: 30rpx;
          
          .feature-item {
            display: flex;
            align-items: center;
            gap: 12rpx;
            margin-bottom: 16rpx;
            font-size: 28rpx;
            color: #323233;
            
            .feature-icon {
              color: #07c160;
              font-size: 24rpx;
            }
          }
        }
        
        .plan-savings {
          background: linear-gradient(135deg, #e8f5e8 0%, #f0f9ff 100%);
          border-radius: 16rpx;
          padding: 20rpx;
          margin-bottom: 30rpx;
          text-align: center;
          
          .savings-text {
            font-size: 26rpx;
            color: #07c160;
            font-weight: 600;
            
            .savings-amount {
              font-size: 32rpx;
              color: #ee0a24;
            }
          }
        }
        
        .plan-button {
          width: 100%;
          height: 88rpx;
          border-radius: 24rpx;
          font-size: 32rpx;
          font-weight: bold;
          border: none;
          transition: all 0.3s ease;
          
          &.primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
            
            &:active {
              transform: scale(0.98);
              box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
            }
          }
          
          &.secondary {
            background: #f7f8fa;
            color: #646566;
            border: 2rpx solid #ebedf0;
            
            &:active {
              background: #ebedf0;
            }
          }
        }
      }
    }
  }
}

/* 动画效果 */
@keyframes backgroundMove {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  25% {
    transform: translateX(-20rpx) translateY(-20rpx);
  }
  50% {
    transform: translateX(20rpx) translateY(-20rpx);
  }
  75% {
    transform: translateX(-20rpx) translateY(20rpx);
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20rpx);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-16rpx);
  }
  60% {
    transform: translateY(-8rpx);
  }
}

/* 响应式适配 */
@media screen and (max-width: 375px) {
  .member-page {
    .member-status,
    .member-benefits,
    .member-plans {
      padding-left: 20rpx;
      padding-right: 20rpx;
    }
    
    .benefits-grid {
      grid-template-columns: 1fr;
    }
    
    .plan-card {
      padding: 30rpx;
    }
  }
}